<template>
    <section style="padding:10px;">
        <el-row>
            <el-col :span="14" >
              <el-button round type="primary"
              size="small" icon="el-icon-plus" @click="openAddAssetInfo" >新增资产条目</el-button> 
              <el-dropdown trigger="click">
                <el-button round size="small" type="primary" plain class="el-dropdown-link">
                    <i><font-awesome-icon :icon="['fas','sign-out-alt']"/></i>&nbsp;导入/导出
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>导入</el-dropdown-item>
                    <el-dropdown-item>导出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
           <el-dropdown trigger="click">
                <el-button round size="small" type="primary" plain class="el-dropdown-link">
                    <i><font-awesome-icon :icon="['far','edit']"/></i>&nbsp;批量操作
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native = "forceOrDelList(5,selects)">禁用</el-dropdown-item>
                    <el-dropdown-item @click.native = "forceOrDelList(4,selects)">删除</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
              </el-col>
            <el-col :span="10" >
            <el-input size="small" placeholder="搜索资产名称" clearable v-model="keyName" class="input-with-select"> 
              <el-button slot="append" @click="searchByKey(keyName)" icon="el-icon-search"></el-button>
              </el-input>
            </el-col>
        </el-row>  
        <el-col class="space"></el-col>
        <el-table
            v-loading="listLoading"
          border
          ref="multipleTable"
          :data="assetInfos" 
          style="width: 100%;"
          @selection-change="selectsChange">
          <el-table-column
            key="selection"
            v-if="selectType==1?true:false"
            type="selection">
          </el-table-column>
          <el-table-column
            fixed
            key="selectitem"
            label="选择" 
            v-if="selectType!=1?true:false">
            <template slot-scope="scope">
              <el-button @click="handleSelectItem(scope.row)" type="text">选择</el-button>
            </template>
          </el-table-column>
          <el-table-column 
            prop="id"
            label="编号" 
            width="80px">
          </el-table-column>
          <el-table-column 
            prop="id"
            label="状态" 
            width="80px">
            <template slot-scope="scope">
              <el-tag v-show="scope.row.status==1" size="mini" type="success">可用</el-tag>
              <el-tag v-show="scope.row.status==5" size="mini"  type="info">已禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column 
            prop="assetName"
            label="资产名称" 
            width="180px">
          </el-table-column>
          <el-table-column
            label="规格" 
            width="130px"
            prop="standrad">
          </el-table-column>
          <el-table-column
            prop="unitPrice"
            width="120px"
            label="单价" >
          </el-table-column> 
          <el-table-column
            prop="unit"
            width="120px"
            label="计量单位">
          </el-table-column> 
          <el-table-column
            label="品牌" 
            width="130px"
            prop="brand" >
          </el-table-column>
          <el-table-column
            label="创建时间" 
            width="130px"
            prop="crateTime" >
          </el-table-column>
          <el-table-column
            label="操作" 
            width="300px">
            <template slot-scope="scope"> 
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                  size="mini"
                  @click="handleForce(scope.$index, scope.row)">{{scope.row.status==5?"解禁":"禁用"}}</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-col :span="24" class="toolbar">
              <el-pagination
              @size-change="sizeChange"
              @current-change="currentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
              </el-pagination>
          </el-col>   

          <el-dialog :title="optionType==1?'添加资产条目':'修改资产条目'" @open="openDialog" @close="resetForm('addForm')" :visible.sync="showAddDialog" width="500px">

            <el-form :model="addForm" :rules="rules" ref="addForm" size="small" label-width="80px"> 
                      <el-row>
                        <el-col :span="18">
                            <el-form-item label="资产分类" prop="classify">
                           <el-cascader   
                                :options="classifyList"
                                change-on-select
                                v-model="addForm.classify" 
                                :props="classifyProps">
                            </el-cascader>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-popover
                                placement="top-start"
                                title="提示"
                                width="220"
                                trigger="hover"
                                content="如果没有分类列表，请前往[分类管理]菜单添加分类">
                                <i slot="reference" style="color:#E6A23C;font-size:18px;"><font-awesome-icon :icon="['fas','info-circle']"/></i>
                            </el-popover>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="资产名称" prop="assetName">
                              <el-input clearable v-model="addForm.assetName"></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="规格" prop="standard">
                              <el-input clearable v-model="addForm.standard"></el-input>
                          </el-form-item> 
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="计量单位" prop="unit">
                              <el-input clearable v-model="addForm.unit"></el-input>
                          </el-form-item> 
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="单价" prop="unitPrice">
                              <el-input clearable v-model="addForm.unitPrice"></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="品牌" prop="brand">
                              <el-input clearable v-model="addForm.brand"></el-input>
                          </el-form-item> 
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="备注" prop="note">
                            <el-input clearable v-model="addForm.note"></el-input>
                        </el-form-item> 
                        </el-col>
                    </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showAddDialog = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('addForm')" >确 定</el-button>
            </div>
        </el-dialog>  
    </section>

</template>

<script>
import api from "@/service/api";
import http from "@/service/http";
import store from "@/store";
import { mapActions, mapGetters } from "vuex";

export default {
  data() {
    return {
      showD:false,
      keyName:'',
      showAddDialog:false,
      optionType:1,
      classifyList:[],
      dialogType:0,
      addForm:{
        id:'',
        classify:[],
        assetName:'',
        standard:'',
        unit:'',
        unitPrice:'',
        brand:'',
        note:''
      },
      classifyProps: {
        label: "name",
        value: "id",
        children: "child",
        disabled: "disabled"
      },
      rules: {
        classify : [{
          required: true, message: "请选择分类", trigger: "change"
        }],
        assetName: [{ required: true, message: "请输入资产名称", trigger: "blur" }],
        standard: [
          { required: true, message: "请输入规格", trigger: "blur" }
        ],
        unit: [
          { required: true, message: "请输入单位", trigger: "blur" }
        ],
        unitPrice: [
          { required: true, message: "请输入单价", trigger: "blur" }
        ]
      }
    };
  }, 
  computed: {
    ...mapGetters({
      currentPage: "system/assetInfo/currentPage",
      pageSize:"system/assetInfo/pageSize",
      total:"system/assetInfo/total",
      selects:"system/assetInfo/selects",
      assetInfos:"system/assetInfo/assetInfos",
      listLoading:"system/assetInfo/listLoading",
      selectType:"system/assetInfo/selectType"
    })
  },
  methods: {
    //导入actions方法
    ...mapActions({
      getInfos: "system/assetInfo/getInfos",
      currentChange: "system/assetInfo/currentChange",
      sizeChange: "system/assetInfo/sizeChange",
      assetShowDialog: "system/assetInfo/showDialog",
      assetSelectionChange: "system/assetInfo/handleSelectionChange",
      assetToSelect: "system/assetInfo/toSelect",
      selectItemChange:"system/assetInfo/selectItemChange",
      selectsChange:"system/assetInfo/selectsChange"
    }),
    handleSelectItem(data){ 
      this.selectItemChange(data);
      this.assetShowDialog(false);
      this.assetToSelect(1);
    },
    openAddAssetInfo(){
      this.optionType = 1;
      this.showAddDialog = true;
    },
    openUpdateAssetInfo(){
      this.optionType = 2;
      this.showAddDialog = true;
    },
    //获取分类
    getClassifyList() {
      http.post(api.sysApi.classifyList, "").then(data => {
        if(!data.success){
				return;
			}
        this.classifyList = data.data;
      });
    },
    submitForm(formName){
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.dialogType == 0){
            this.addAssetInfo();
          }else{
            this.updateAssetInfo();
          }
        } else {
          return false;
        }
      });
    },
    //编辑
    handleEdit(index,row){
        this.showAddDialog = true;
        this.dialogType = 1;
        this.addForm.id = row.id;
        this.addForm.classify = row.classifyIds;
        this.addForm.assetName = row.assetName;
        this.addForm.standard = row.standrad;
        this.addForm.unit = row.unit;
        this.addForm.unitPrice = row.unitPrice;
        this.addForm.brand = row.brand;
    },
    //禁用.解禁单个
    handleForce(index,row){
      let assetInfoIds = [];
      assetInfoIds.push({id:row.id,status:row.status});
      this.forceOrDelList(row.status == 5?6:5,assetInfoIds);
    },
    //删除单个
    handleDelete(index,row){
      let assetInfoIds = [];
      assetInfoIds.push({id:row.id});
      this.forceOrDelList(4,assetInfoIds);
    },
    //type:操作类型5：禁用   4：删除  6：解禁
    forceOrDelList(optionType,selects){ 
      if(selects.length==0){
         this.$message({
              message: '请选择要操作的条目',
              type: "warning"
            });
          return;
      }
      this.$confirm(optionType==5?'确定禁用所选资产条目吗?':optionType==4?'确定删除所选资产条目吗?':'确定解禁所选资产条目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { 
          let ids = [];
          selects.map((v, k) => {
            ids.push(v.id);
          });  
          http.post(api.sysApi.forceOrDel, {ids:ids,type:optionType}).then(data => {
            if(!data.success){
              return;
            }
            this.$message({
              message: optionType==5?"已禁用":optionType==4?"已删除":'已解禁',
              type: "success"
            });
            this.getInfos();
          });
      }).catch(() => {}); 
    },
    updateAssetInfo(){
      let param = {
          id:this.addForm.id,
          name:this.addForm.assetName,
          standrad:this.addForm.standard,
          unit:this.addForm.unit,
          unitPrice:this.addForm.unitPrice,
          brand:this.addForm.brand,
          del:0,
          classifyId:this.addForm.classify[this.addForm.classify.length-1]
      };
      http.post(api.sysApi.updateAssetInfo, param).then(data => {
        if(!data.success){
          return;
        }
         this.$message({
          message: "修改成功",
          type: "success"
        });
        this.showAddDialog = false;
        this.getInfos();
      });
    },
    addAssetInfo(){
      let param = {
          name:this.addForm.assetName,
          standrad:this.addForm.standard,
          unit:this.addForm.unit,
          unitPrice:this.addForm.unitPrice,
          brand:this.addForm.brand,
          del:0,
          classifyId:this.addForm.classify[this.addForm.classify.length-1]
      };
      http.post(api.sysApi.addAssetsInfo, param).then(data => {
        if(!data.success){
          return;
        }
         this.$message({
          message: "添加成功",
          type: "success"
        });
        this.showAddDialog = false;
        this.getInfos();
      });
    },
    searchByKey(keyName){
      this.getInfos(keyName);
    },
    openDialog(){
        this.getClassifyList();
    },
    resetForm(formName) {
      this.dialogType = 0;
      this.addForm = {};
      this.showAddDialog = false;
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    this.getInfos();
  }
};
</script>

<style> 
.el-dialog {
  width: 60% !important;
}
.space{
  height: 10px !important;
  width: 1px;;
}
</style>

